<template>
  <div class="outer-padding">
    <div class="ds-title pd-bottom--32">课表查看</div>
    <div class="pdb-32 df">
      <a-button type="primary" @click="$router.push('/data/schedule/edit')">新增课程</a-button>
      <div class="mla">
        <a-input-search
          style="width: 480px"
          v-model:value="queryParam.account"
          placeholder="搜索账号"
          @search="onSearch"
        >
        </a-input-search>
      </div>
    </div>

    <dynamic-table ref="tableRef" :columns="columns" :get-list-func="loadData" rowKey="id">
      <!-- <template #index="{ record, index }">{{ index + 1 }}</template> -->
      <template #operate="{ record }">
        <span
          class="pointer pdl-12 pdr-12"
          style="border-right: 1px solid #ddd"
          @click="$router.push(`/data/schedule/find?id=${record.id}`)"
        >
          <icon-font type="icon-eye"></icon-font>
          预约情况
        </span>
        <span
          class="pointer pdl-12 pdr-12"
          style="border-right: 1px solid #ddd"
          @click="$router.push(`/data/schedule/edit?id=${record.id}`)"
        >
          <icon-font type="icon-edit"></icon-font>
          编辑
        </span>
        <a-popconfirm title="你确定要删除此条记录吗？" @confirm="del(record.id)">
          <span class="pointer pdl-12">
            <icon-font type="icon-delete"></icon-font>
            删除
          </span>
        </a-popconfirm>
      </template>
    </dynamic-table>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import { getIndexList } from '@/api/listen'
  import { columns } from './columns'
  import { postDelById } from '@/api/system'
  import IconFont from '@/components/iconfont/icon-font'

  export default defineComponent({
    name: 'scheduleComponent',
    components: {
      DynamicTable,
      IconFont,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        queryParam: {
          account: null,
          scoreDay: null,
        },
        currTitle: 1,
        activeKey: 0,
      })

      /**
       * @description 加载表格数据
       */
      /**
       * @description 加载表格数据
       */
      const loadData = (params) => {
        const myParams = { ...params, ...state.queryParam }
        return getIndexList(myParams)
      }

      const onSearch = (ev) => {
        console.log(ev)
        state.queryParam.account = ev
        tableRef.value?.refreshTableData()
      }

      // 删除
      const del = async (ev) => {
        await postDelById({ id: ev })
      }

      return {
        ...toRefs(state),
        tableRef,
        valueDate,
        loadData,
        columns,
        onSearch,
        del,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .flex-table {
    display: flex;
    align-items: center;
  }
</style>
